<template>
    <div class="goods">
        <!--        面包屑导航-->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部商品</el-breadcrumb-item>
                <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
                <el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
                <el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--        nav导航-->
        <div class="nav">
            <div class="product_nav">
                <div class="title">分类</div>
                <el-tabs v-model="activeName" type="card">
                    <!--                    category_id: 1, category_name: "手机"-->
                    <el-tab-pane
                        v-for="item in categoryList"
                        :key="item.category_id"
                        :label="item.category_name" :name="''+item.category_id">
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!--       主要内容-->
        <div class="main">
            <!--            商品列表-->
            <div v-if="allProduct.length" class="list">
                <goods-list :goodsData="allProduct"></goods-list>
            </div>
            <div v-else class="list">
                <h6>抱歉没有找到相关的商品，请看看其他的商品</h6>
            </div>
            <!--            分页-->
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :page-size="queryInfo.pageSize"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import goodsAPI from "../request/api/goodsAPI"

export default {
    name: "Goods",
    created() {
        //获取所有分类
        this.getCategory();
    },
    activated() {
        //searchStr
        console.log("this.$route.query===>",this.$route.query)

        let search = this.$route.query.search
        if(search){
            this.search = search;
            this.getProductBySearch();
            return;
        }

        //如果this.$globalData.$categoryArr存在长度 就证明是点击浏览更多按钮进入页面的
        if(this.$globalData.$categoryArr.length){
            this.queryInfo.categoryID = this.$globalData.$categoryArr
            this.$globalData.$categoryArr = [];
            this.activeName = "-1"
            this.getProduct()
        }else {//证明用户直接点击链接进入当前页面或者刷新页面进入的
            let num = Number(this.activeName);
            this.activeName = num !== -1? this.activeName : "0"
        }
    },
    data() {
        return {
            search: "", //搜索条件
            activeName: "-1",//选项卡切换名称
            categoryList: [],//商品分类信息
            allProduct: [],//所有商品数据
            queryInfo: {
                categoryID: [],//分类id
                currentPage: 1,//当前页
                pageSize: 15,//每页显示多少条
            },
            total: 0, //总条数
        }
    },
    watch: {
        activeName(val) {//切换分类会触发当前的watch
            if(val === "-1") return;
            //初始化数据
            this.queryInfo.currentPage = 1;
            this.total = 0;
            this.search = "";

            //切换分类获取相关分类的数据
            let categoryID = Number(val);

            //获取当前的activeName值 如果是0则表示请求全部数据,如果不是0那么就请求相应的分类数据
            this.queryInfo.categoryID = categoryID === 0 ? [] : [categoryID];

            this.getProduct()
        },
        //监听路由改变
        $route(val){//在当前页面去改变了搜索条件
            console.log(val);
            if(val.query.search){
                //更新搜索条件
                this.search = val.query.search;
                //数据初始化
                this.activeName = "-1";
                this.queryInfo.currentPage = 1;
                this.total = 0;
                //重新获取搜索数据
                this.getProductBySearch()
            }
        }
    },
    methods: {
        //获取商品分类信息
        async getCategory() {
            let {data: res} = await goodsAPI.getCategory();
            this.categoryList = res.category;
            this.categoryList.unshift({
                category_id: 0, category_name: "全部"
            })
        },
        //获取所有商品数据
        async getProduct() {
            let apiName = this.queryInfo.categoryID.length ? "getProductByCategory" : "getAllProduct"
            let {data: res} = await goodsAPI[apiName](this.queryInfo);
            this.allProduct = res.Product;
            this.total = res.total
        },
        //页码变化时调用currentChange方法
        currentChange(currentPage) {
            this.queryInfo.currentPage = currentPage;
            if(this.search){
                this.getProductBySearch()
            }else {
                this.getProduct()
            }
        },
        //通过搜索条件请求商品列表
        async getProductBySearch(){
            let sendData = {
                currentPage: this.queryInfo.currentPage,
                pageSize: 15,
                search: this.search
            }
            let {data: res} = await goodsAPI.getProductBySearch(sendData);
            this.allProduct = res.Product;
            this.total = res.total
        }
    }
}
</script>

<style scoped lang="scss">
.goods {
    background-color: #f5f5f5;

    /* 面包屑CSS */
    .el-tabs--card .el-tabs__header {
        border-bottom: none;
    }
    .breadcrumb {
        height: 50px;
        background-color: #ffffff;
        .el-breadcrumb {
            margin: 0 auto;
            width: 1225px;
            line-height: 30px;
            font-size: 16px;
        }
    }

    .nav {
        background-color: #ffffff;

        .product_nav {
            margin: 0 auto;
            width: 1225px;
            height: 40px;
            line-height: 40px;

            .title {
                float: left;
                width: 50px;
                font-size: 16px;
                font-weight: 700;
            }
        }
    }

    .main {
        margin: 0 auto;
        max-width: 1225px;

        .list {
            min-height: 650px;
            margin-top: 14.5px;
            margin-left: -13.7px;
            overflow: auto;
        }

        .pagination {
            height: 50px;
            text-align: center;
        }
        .none-product {
            color: #333;
            margin-left: 13.7px;
        }
    }
}
</style>